<!--
 * @Author: xjt
 * @Date: 2021-04-30 10:24:37
 * @LastEditTime: 2021-04-30 11:14:19
 * @Description: 运营 - 修缮 - 合同录入 - 新增页面
 * @LastEditors: xjt
-->
<template>
  <div class="basic-from">
    <div class="resource-manage">
      <div class="card-box">
        <el-form ref="form" :rules="rules" :model="operationContract" class="form-wrap">
          <el-form-item label="工程名称" class="listFormItem" prop="engineeringName">
            <el-button class="add" type="primary" size="mini" @click="$refs.propertyChoose.show();">选择</el-button>
            <el-input v-halfCharCode v-model="operationContract.engineeringName" placeholder="请选择工程名称" readonly />
          </el-form-item>
          <el-form-item label="单位名称" prop="unitName">
            <el-input v-halfCharCode v-model="operationContract.unitName" readonly placeholder="请输入单位名称" />
          </el-form-item>
          <el-form-item label="物业名称" prop="propertyName">
            <el-input v-halfCharCode v-model="operationContract.propertyName" readonly placeholder="请输入物业名称" />
          </el-form-item>
          <el-form-item label="合同名称" class="breakItem" prop="contractName">
            <el-input v-halfCharCode v-model.trim="operationContract.contractName" maxlength="20" placeholder="请输入合同名称" />
          </el-form-item>
          <el-form-item label="合同编号" prop="contractNumber">
            <el-input v-halfCharCode v-model.trim="operationContract.contractNumber" disabled maxlength="30" placeholder="请输入合同编号" />
          </el-form-item>
          <el-form-item label="签订日期" prop="signTime">
            <el-date-picker v-model="operationContract.signTime" format="yyyy-MM-dd" placeholder="请输入签订日期" value-format="yyyy-MM-dd" :picker-options="pickerOptions"/>
          </el-form-item>

          <el-form-item label="合同金额" prop="totalAmount">
            <el-input
              v-halfCharCode
              v-model="operationContract.totalAmount"
              oninput="value=value.replace(/[^0-9.]/g,'')"
              maxlength="15"
              placeholder="请输入合同金额"
            />
          </el-form-item>
          <el-form-item label="工期" prop="constructionPeriod">
            <el-input v-halfCharCode v-model.number="operationContract.constructionPeriod" maxlength="5" placeholder="请输入工期">
              <i slot="suffix">日历日</i>
            </el-input>
          </el-form-item>
          <el-form-item label="保修期" prop="warrantyPeriod">
            <el-input
              v-halfCharCode
              v-model.number="operationContract.warrantyPeriod"
              maxlength="3"
              oninput="value=value.replace(/[^\d]/g,'')"
              placeholder="请输入保修期"
            >
              <i slot="suffix">月</i>
            </el-input>
          </el-form-item>
          <el-form-item label="保证金" prop="margin">
            <el-input v-model="operationContract.margin" v-only-number="{min:0,precision:2}" maxlength="20" placeholder="请输入保证金">
              <i slot="suffix">元</i>
            </el-input>
          </el-form-item>
          <el-form-item label="付款方式" class="full" prop="payMethod">
            <el-input v-halfCharCode v-model="operationContract.payMethod" type="textarea" maxlength="64" placeholder="请输入付款方式" />
          </el-form-item>
          <el-form-item label="备注" class="full" prop="remarks">
            <el-input v-halfCharCode v-model="operationContract.remarks" type="textarea" maxlength="200" placeholder="请输入内容" />
          </el-form-item>
          <el-form-item label="服务价目列表" class="full" prop="operateContractDetailList">
            <el-button size="mini" type="primary" style="float: right" @click="addDetailList">添加</el-button>
            <el-table :data="operateContractDetailList" class="full">
              <el-table-column type="index" label="序号" width="50" />
              <el-table-column prop="unitPrice" label="单价(元/m²)" width="180">
                <template slot-scope="scope">
                  <el-input
                    v-halfCharCode
                    oninput="value=value.replace(/[^0-9.]/g,'')"
                    maxlength="12"
                    v-model="scope.row.unitPrice"
                    placeholder="单价(元/m²)"
                  />
                </template>
              </el-table-column>
              <el-table-column prop="costItems" label="费用项目">
                <template slot-scope="scope">
                  <el-input v-halfCharCode v-model="scope.row.costItems" maxlength="50" placeholder="项目名称" />
                </template>
              </el-table-column>
              <el-table-column prop="paymentAmount" label="付款金额(元)">
                <template slot-scope="scope">
                  <el-input
                    v-halfCharCode
                    v-model="scope.row.paymentAmount"
                    oninput="value=value.replace(/[^0-9.]/g,'')"
                    maxlength="15"
                    placeholder="付款金额(元)"
                  />
                </template>
              </el-table-column>
              <el-table-column prop="discountAmount" label="折扣金额(元)">
                <template slot-scope="scope">
                  <el-input
                    v-halfCharCode
                    v-model="scope.row.discountAmount"
                    oninput="value=value.replace(/[^0-9.]/g,'')"
                    maxlength="15"
                    placeholder="折扣金额(元)"
                  />
                </template>
              </el-table-column>
              <el-table-column prop="finallyAmount" label="最终金额(元)">
                <template slot-scope="scope">
                  <span>{{getTotalCount(scope.$index, scope.row.paymentAmount, scope.row.discountAmount)}}</span>
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button size="mini" type="text" @click="releteDetailList(scope.$index)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
        </el-form>
      </div>
      <!-- 工程选择弹窗 -->
      <propertyChooseDialog ref="propertyChoose" dialogType="contract" @changeProperty="handlePropertyChange" />
    </div>
    <div class="cFormFoot">
      <el-button type="primary" @click="$router.back()" plain>返回</el-button>
      <el-button type="primary" v-throttle="[save]">保存</el-button>
    </div>
  </div>
</template>

<script src='./index.js'></script>

<style lang="scss" scoped>
.resource-manage {
  padding: 24px 24px 0;
}
</style>
